<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
            <el-form
                :model="articleForm"
                ref="form"
                label-width="80px"
                :inline="true"
                size="normal"
            >
                <el-form-item label="文章分类">
                    <el-select v-model="articleForm.cateid" placeholder="文章分类">
                        <el-option
                            v-for="item in menuList"
                            :key="item.id"
                            :label="item.catename"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关键字" size="normal">
                    <el-input v-model="articleForm.keywords" placeholder="关键字" size="normal"></el-input>
                </el-form-item>
                <el-form-item label="发布时间" size="normal">
                    <el-date-picker
                        v-model="articleForm.time"
                        value-format="timestamp"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="getArticleList">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="articleList" border stripe>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="id" label="文章ID"></el-table-column>
            <el-table-column prop="title" label="文章标题"></el-table-column>
            <el-table-column prop="author" label="文章作者"></el-table-column>
            <el-table-column prop="catename" label="文章分类"></el-table-column>
            <el-table-column label="缩略图">
                <template slot-scope="scope">
                    <img :src="scope.row.picimg.length? scope.row.picimg[0].url:''" alt />
                </template>
            </el-table-column>
            <el-table-column prop="click" label="阅读次数"></el-table-column>
            <el-table-column label="发布时间">
                <template slot-scope="scope">{{scope.row.createtime | dataFormate}}</template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        icon="el-icon-edit"
                        circle
                        @click="$router.push('/article/'+scope.row.id)"
                    ></el-button>
                    <el-button
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="del(scope.row.id)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
            layout="total, sizes, prev, pager, next"
            :total="total"
            :page-sizes="[10,20,30]"
            @current-change="pageChange"
            @size-change="sizeChange"
        ></el-pagination>
    </el-card>
</template>
<script>
import { mapState, mapActions } from "vuex";
let articleDefault = {
    act: "getlist",
    cateid: "",
    keywords: "",
    time: [],
    id: "",
    start: 1,
    pagesize: 10,
};
export default {
    data() {
        return {
            articleForm: {
                ...articleDefault,
            },
            articleList: [],
            total: 0,
        };
    },
    computed: {
        ...mapState(["menuList"]),
    },
    methods: {
        ...mapActions(["getMenuList"]),
        reset() {
            this.articleForm = {
                ...articleDefault,
            };
            this.getArticleList();
        },
        pageChange(val) {
            this.articleForm.start = val;
            this.getArticleList();
        },
        sizeChange(val) {
            this.articleForm.pagesize = val;
            this.articleForm.start = 1;
            this.getArticleList();
        },

        async getArticleList() {
            this.articleForm.time = this.articleForm.time.join(",");
            let { data: res } = await this.$axios.get("api/article", {
                params: this.articleForm,
            });
            if (res.code !== 200) return this.$message.error(res.msg);
            this.articleList = res.data;
            this.articleForm.time = [];
            this.total = res.allNum;
        },

        async del(id) {
            try {
                await this.$confirm("您确定要删除此文章吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                });
                let { data: res } = await this.$axios.get("api/article", {
                    params: {
                        id: id,
                        act: "del",
                    },
                });

                if (res.code !== 200) return this.$message.error(res.msg);
                if (
                    this.articleForm.start !== 1 &&
                    this.articleList.length == 1
                ) {
                    this.articleForm.start--;
                }
                this.getArticleList();
            } catch (error) {
                this.$message.error("取消删除");
            }
        },
    },
    mounted() {
        this.menuList.length || this.getMenuList();
        this.getArticleList();
    },
};
</script>
<style>
.el-table img {
    width: 100px;
    height: 80px;
}
.el-form {
    text-align: left;
}
</style>
